<script setup lang="ts">
import { ref } from 'vue'
import { useCurrentUserStore } from '@/stores/currentUser';
import { useRouter } from 'vue-router';
import authApi from '@/api/auth';
import FileArea from '@/components/FileArea.vue';
const router = useRouter()
const currentUser = useCurrentUserStore()
function logout() {
    authApi.logout().then(res => {
        currentUser.logout()
        router.push({ path: '/login' })
    })
}
var mqList = window.matchMedia('(prefers-color-scheme: dark)');
mqList.matches ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark')
const schemeChange = (event:any) => {
    if (event.matches) {
    console.log("a");
    window.document.documentElement.classList.add('dark')
  } else {
    // not dark mode
    console.log('b');
    window.document.documentElement.classList.remove('dark')
  }
}
if (mqList.addEventListener) {
  mqList.addEventListener('change',schemeChange);
} else if (mqList.addListener) {
  // 否则, 检测 MediqQueryList 对象上是否存在 addListener 方法
  mqList.addListener(schemeChange);
}

</script>

<template>

    <main>
        <header>
            {{ currentUser.getUserDetail() }}<button @click="logout">logout</button>
        </header>
        <div class="sidebar">
        </div>
        <div class="main">
            <FileArea></FileArea>
        </div>
    </main>
</template>
<style scoped>
header {
    height: 50px;
    background-color: rgb(117, 191, 255);
}

main {
    height: calc(100vh - 100px);
    overflow: auto;
    /* display: flex; */
    height: 100%;
}

.sidebar {
    /* width: 200px; */
    background-color: aquamarine;
}

.main {
    flex: 1;
    /* background-color: rgb(190, 238, 222); */
    overflow: auto;
}
</style>
